<template>
	<el-main class="preview" v-loading="loading">
		<div class="preview_top">
			<span class="preview_top_status"> 当前订单状态：{{orderStatus}}</span>
			<el-button type="primary" @click="handleShip" v-if="info.status === 1">发货</el-button>
			<el-button type="primary" @click="handleLogistics" v-if="info.status === 2">查看物流</el-button>
		</div>
		<div class="preview_item">
			<el-card header=" 基本信息">
				<el-table :data="dataLIst" border :header-cell-style="{background:'#f8f8f8',color:'#606266'}" style="width:100%">
					<el-table-column prop="tradeNo" align="center" width="200" label="订单编号"></el-table-column>
					<el-table-column prop="postNo" align="center" width="200" label="发货单流水号"></el-table-column>
					<el-table-column prop="memberNickName" align="center" width="150" label="发送方账号">
						<template slot-scope="scope">
							<span>{{$util.decode(scope.row.memberNickName)}}</span>
						</template>
					</el-table-column>
					<el-table-column align="center" width="150" label="支付方式">
						<template slot-scope="scope">
							<span>{{getOrderpayType(scope.row.payType)}}</span>
						</template>
					</el-table-column>
					<el-table-column align="center" width="150" label="订单来源">
						<template slot-scope="scope">
							<span>{{getSource(scope.row.source)}}</span>
						</template>
					</el-table-column>
				</el-table>
				<el-table :data="dataLIst" border :header-cell-style="{background:'#f8f8f8',color:'#606266'}" style="width:100%">
					<el-table-column prop="channelName" align="center" width="200" label="配送方式"></el-table-column>
					<el-table-column prop="postNo" align="center" width="200" label="物流单号"></el-table-column>
					<el-table-column prop="sourceInfo" align="center" width="150" label="—"></el-table-column>
					<el-table-column prop="sourceInfo" align="center" width="150" label="—"></el-table-column>
					<el-table-column prop="sourceInfo" align="center" width="150" label="—"></el-table-column>
				</el-table>
			</el-card>
		</div>
		<div class="preview_item">
			<el-card header=" 发送人信息">
				<el-table :data="dataLIst" border :header-cell-style="{background:'#f8f8f8',color:'#606266'}" style="width:100%">
					<el-table-column align="center" width="200" label="发送人信息">
						<template slot-scope="scope">
							<p class="table_p left">{{$util.decode(scope.row.memberNickName)}}</p>
							<p class="table_p">发送时间：{{scope.row.createTime}}</p>
						</template>
					</el-table-column>
					<el-table-column align="center" width="200" label="接收人信息">
						<template slot-scope="scope">
							<p class="table_p left">{{$util.decode(scope.row.receiveNickName) || '--'}}</p>
							<p class="table_p">接收时间：{{scope.row.receiveTime || '--'}}</p>
						</template>
					</el-table-column>
					<el-table-column align="center" width="200" label="发送商品">
						<template slot-scope="scope">
							<p 
								class="table_p left"
								v-for="item of scope.row.itemModels"
								:key="item.itemUid">
								{{item.productName | controlLength}} x{{item.buyCount}}</p>
						</template>
					</el-table-column>
					<el-table-column prop="sourceInfo" align="center" width="200" label="接收地址">
						 <template slot-scope="scope">
							<template  v-if="scope.row.address">
								<p class="table_p left">地址：{{scope.row.address}}</p>
								<p class="table_p left">电话：{{scope.row.mobile}}</p>
								<p class="table_p left">联系人：{{$util.decode(scope.row.receiveNickName)}}</p>
							</template>
							<span v-else>待填写地址</span>
						</template>
					</el-table-column>
				</el-table>
			</el-card>
		</div>
		<div class="preview_item">
			<el-card header=" 商品费用和信息">
				<el-table
					:data="itemModels"
					border
					:header-cell-style="{background:'#f8f8f8',color:'#606266'}"
					style="width: 751px">
					<el-table-column prop="productListPath" align="center" width="100" label="商品图片">
						 <template slot-scope="scope">
							 <img v-image-preview :src="scope.row.productListPath" width="60" />
						</template>
					</el-table-column>
					<el-table-column prop="productName" align="center" width="200" label="商品名称">
						<template slot-scope="scope">
							<p>{{scope.row.productName | controlLength}} x{{scope.row.buyCount}}</p>
						</template>
					</el-table-column>
					<el-table-column prop="" align="center" width="150" label="价格/货号">
						<template slot-scope="scope">
							<p class="text-price">{{$util.prices(scope.row.unitPrice)}}</p>
						</template>
					</el-table-column>
					<el-table-column prop="buyCount" align="center" width="150" label="数量"></el-table-column>
					<el-table-column  align="center" width="150" label="小计">
						<template slot-scope="scope">
							<p class="text-price">{{$util.prices(scope.row.totalPrice)}}</p>
						</template>
					</el-table-column>
				</el-table>
				<div class="cardBottom">
					合计: <span class="text-price">{{$util.prices(toatal)}}</span>
				</div>
			</el-card>
		</div>
	</el-main>
</template>
<script>
	import { ordersDetail } from "@/api/table";
    import utils from '@/utils/utils';
	
    export default {
		name: "ORDERS_PREVIEW",
		filters: {
            controlLength: curStr => utils.controlLength(curStr, 10),
        },
		props: {
			transData: {
				type: Object,
				default() {
					return {}
				}
			},
			ordersStateList: {
				type: Array,
				default() {
					return []
				}
			},
		},
		data() {
			return {
				info: this.transData || {},
				dataLIst: [],
				itemModels: [],
				loading: true,
				toatal: 0,
				orderStatus: '--'
			}
		},
		created() {
			this.getData();
			this.$event.on('ShipFinshed', () => {
				// this.getData();
				this.orderStatus = '已发货';
				this.info.status = 2;
			});
		},
		beforeDestroy() {
			this.$event.off('ShipFinshed');
		},
     	methods: {
			onPreviewPage() {
				this.$emit('ClosePreviewPage', false)
			},
			updateData() {
				this.info = {...this.transData}
			},
			getOrderStatus(status) {
				const data = this.ordersStateList.find(item => item.status === status) || {}
				this.orderStatus = !Object.keys(data).length ? '--' : data.name;
                return this.orderStatus
            },
			//
			handleShip() {
				this.$event.emit('ShowShipPage', this.info)
			},
			// 查看物流
			handleLogistics() {
				this.$event.emit('ShowLogisticsPage', this.info)
			},
			getOrderpayType(type) {
                switch (type) {
                    case 1: return '微信'
                    case 2: return '余额'
                    default: return '待支付';
                }
			},
			getSource(type) {
 				switch (type) {
                    case 1: return 'app'
                    case 2: return '网页'
                    default: return '小程序';
                }
			},
			getData() {
				ordersDetail({
					orderUid: this.info.orderUid
				}).then(res => {
					// console.log(res)
					if (res.data.isSuccessful === "Y") {
						const { data } = res.data;
						let redPacketInfo = [];
						data.redPacketModels.map(item => {
							return redPacketInfo.push({
								buyCount: 1,
								productName: item.redPacketName || '红包',
								productListPath: item.redPacketCoverUrl,
								unitPrice: item.redPacketAmount,
								totalPrice: item.redPacketAmount
							})
						});
				
						this.itemModels = [...data.itemModels, ...redPacketInfo];
						data.itemModels = this.itemModels;
						this.dataLIst = [data];
						this.toatal = data.totalAmount;
						this.getOrderStatus(data.status)
					}
				}).finally(() => {
					this.loading = false
				});
			},
      	},
  	}
</script>
<style lang="scss" scoped>
	.preview {
		padding: 0 50px;
		height: 850px;
		overflow: auto;
		&_top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 80px;
			background-color: #f5f5f5;
			padding: 0 20px;
			margin-bottom: 40px;
			&_status {
				font-size: 16px;
				color: #F04844;
			}
		}
		&_item {
			margin-bottom: 20px;
			&_table {
				height: 200px;
			}
		}
		.table_p {
			font-size: 12px;
			&.left {
				text-align: left;
			}
		}
		.cardBottom {
			width: 751px;
			background-color: #dddddd;
			text-align: right;
			padding: 20px 40px 20px 80px;
			> span {
				color: #F04844;
				margin-left: 10px;
			}
		}
	}
</style>
